<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            position: relative;

            background: crimson;
        }
        .box2{
            width: 100px;
            height: 100px;
            position: relative;

            background: aqua;
        }
        .box3{
            width: 100px;
            height: 100px;
            position: relative;

            background: salmon;
        }
        .box4{
            width: 100px;
            height: 100px;
            position: relative;

            background: violet;
        }
        .box5{
            width: 100px;
            height: 100px;
            position: relative;

            background: dodgerblue;
        }
    </style>
</head>
<body>
    <button id="btn1">click</button>
    <br>
    <button id="btn2">double click</button>
    <br>
    <button id="btn3">mouse down</button>
    <br>
    <button id="btn4">mouse up</button>
    <br>
    <div id="btn5" class="box1">mouse move</div>
    <div id="btn6" class="box2">mouse enter</div>
    <div id="btn7" class="box3">mouse leave</div>
    <div id="btn8" class="box4">mouse over</div>
    <div id="btn9" class="box5">mouse out</div>

    <script>
        var btn1 = document.getElementById('btn1')
        var btn2 = document.getElementById('btn2')
        var btn3 = document.getElementById('btn3')
        var btn4 = document.getElementById('btn4')
        var btn5 = document.getElementById('btn5')
        var btn6 = document.getElementById('btn6')
        var btn7 = document.getElementById('btn7')
        var btn8 = document.getElementById('btn8')
        var btn9 = document.getElementById('btn9')

        btn1.addEventListener('click',function(){
            alert('你点了一下')
        })

        btn2.addEventListener('dblclick',function(){
            alert('你还敢点两下？！')
        })

        btn3.addEventListener('mousedown',function(){
            alert('你按下去了')
        })
        
        btn4.addEventListener('mouseup',function(){
            alert('你抬起来了')
        })
        
        btn5.addEventListener('mousemove',function(){
            console.log('你一直在动，都没有停过')
        })

        btn6.addEventListener('mouseenter',function(){
            console.log('你进来了')
        })

        btn7.addEventListener('mouseleave',function(){
            console.log('你出去了')
        })
        btn8.addEventListener('mouseover',function(){
            console.log('你在我上面')
        })

        btn9.addEventListener('mouseout',function(){
            console.log('你到外面去了')
        })

        document.addEventListener('wheel',function(){
            alert('需要你用滚轮吗？')
        })


    </script>
</body>
</html>